<!DOCTYPE html>
<html lang="zh">
<head>
    <title>短网址服务</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/custom.css') }}">
</head>

<script type="text/javascript">
 $(function() {
     $('#submitButton').click(function() {
         $.ajax({
             // 发送方式
             type: "POST",
             // 规定url地址
             url: "/shorten",
             // 发送数据的格式JSON
             dataType: 'json',
             contentType: "application/json",
             // 要发送的数据
             data: JSON.stringify({'url' : $('#url').val()}),
             // 如果服务器响应200则会被调用
             success: function(json) {
                            if(json.url) {
                                $('#url-result').text(json.url);
                                $('#url').val("");
                                $("a").attr("href", json.url)
                            } else {
                                $('#url-result').text("请输入一个URL!");
                            }
                       },
             error: function() {
                alert("服务器异常");
             }
         });
     });
});

</script>

<body>
    <div id="wrap">
        <header>
           <h1><a href="">短网址服务</a></h1>
           <p>请输入一个网址</p>
        </header>
        <div class="container">
            <div class="row">
                <div class="col s12">
                    <input type="text" name="url" id="url" class="form-control input-sm" placeholder="请输入一个合法的网址" />
                </div>
            </div>
            <div class="row">
                <div class="col s4 offset-s4">
                    <button id="submitButton" class="waves-effect waves-light btn-large blue darken-1">生成</button>
                </div>
            </div>
            <div class="row">
                <div class="col s12">
                    <div class="panel-footer">
                        <h4>
                            <a href="#" id="url-result">输入 URL</a>
                        </h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

